<template>
  <div class="">
    <el-row :gutter="10">
      <el-col :span="4">
        <el-page-header @back="goBack" content="订单详情"></el-page-header>
      </el-col>
      <el-col :span="2" v-if="this.$route.params.cz == 0">
        <el-button
          type="success"
          icon="el-icon-circle-check"
          size="small "
          @click="qrwg()"
        >
          确认完工
        </el-button>
      </el-col>
      <el-col :span="2" v-if="this.$route.params.cz == 1">
        <el-button
          type="success"
          icon="el-icon-circle-check"
          size="small "
          @click="ljjs()"
        >
          立即检验
        </el-button>
      </el-col>
    </el-row>
    <div id="dynr">
      <el-row :gutter="10">
        <el-col :span="3">
          <h2>--- {{ list.serviceType }}</h2>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-input v-model="list.repairbillno" size="small " :readonly="rdy">
            <template slot="prepend">
              <div style="color: #000">维修单号</div>
            </template>
          </el-input></el-col
        >
        <el-col :span="5"
          ><el-input v-model="list.ulicense" size="small " :readonly="rdy">
            <template slot="prepend">
              <div style="color: #000">车牌号</div>
            </template>
          </el-input></el-col
        >
      </el-row>
      <br />
      <el-row :gutter="10">
        <el-col :span="5">
          <el-input v-model="list.redriver" size="small " :readonly="rdy">
            <template slot="prepend">
              <div style="color: #000">驾驶员</div>
            </template>
          </el-input></el-col
        >
        <el-col :span="5"
          ><el-input v-model="list.redriverphone" size="small " :readonly="rdy">
            <template slot="prepend">
              <div style="color: #000">驾驶员电话</div>
            </template>
          </el-input></el-col
        >
      </el-row>
      <br />

      <el-row :gutter="10">
        <el-col :span="5">
          <div
            class=""
            style="text-align: left; font-size: 17px; margin-bottom: 8px"
          >
            业务类别
          </div>
          <el-input v-model="list.sename" size="small " :readonly="rdy">
          </el-input>
        </el-col>

        <el-col :span="5">
          <div
            class=""
            style="text-align: left; font-size: 17px; margin-bottom: 8px"
          >
            施工班次
          </div>
          <el-input v-model="list.shiftsname" size="small " :readonly="rdy">
          </el-input>
        </el-col>

        <el-col :span="5">
          <div
            class=""
            style="text-align: left; font-size: 17px; margin-bottom: 8px"
          >
            结算方式
          </div>
          <el-input
            v-model="list.clearingformname"
            size="small "
            :readonly="rdy"
          >
          </el-input>
        </el-col>
      </el-row>
      <br />
      <el-row :gutter="10">
        <el-col :span="5">
          <div
            class=""
            style="text-align: left; font-size: 17px; margin-bottom: 8px"
          >
            进厂油量
          </div>
          <el-input v-model="list.oilmassname" size="small " :readonly="rdy">
          </el-input>
        </el-col>
      </el-row>
      <br />
      <el-row :gutter="10">
        <el-col :span="5">
          <div
            class=""
            style="text-align: left; font-size: 17px; margin-bottom: 8px"
          >
            接待备注
          </div>
          <el-input
            type="textarea"
            v-model="list.receptionnote"
            :readonly="rdy"
          >
          </el-input>
        </el-col>
        <el-col :span="5">
          <div
            class=""
            style="text-align: left; font-size: 17px; margin-bottom: 8px"
          >
            报修陈述
          </div>
          <el-input type="textarea" v-model="list.statement" :readonly="rdy">
          </el-input>
        </el-col>
      </el-row>
      <br />
      <el-row :gutter="10">
        <el-col :span="4">
          <h3>--- 操作菜单</h3>
        </el-col>
      </el-row>
      <template>
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
          style="width: 980px"
        >
          <el-tab-pane label="项目详情" name="second">
            <template>
              <el-table :data="lscql" style="width: 100%">
                <el-table-column
                  prop="rbprojectid"
                  label="项目编号"
                  width="180"
                ></el-table-column>
                <el-table-column prop="rbprojectsl" label="数量" width="180">
                </el-table-column>
                <el-table-column prop="yprice" label="原价"> </el-table-column>
                <el-table-column
                  prop="yprices"
                  label="优惠价"
                  width="180"
                ></el-table-column>
                <el-table-column
                  prop="rbprojectms"
                  label="故障描述"
                  width="180"
                >
                </el-table-column>
                <el-table-column
                  prop="rbprojectyy"
                  label="故障原因"
                ></el-table-column>
                <el-table-column
                  prop="nocharge"
                  label="免单原因"
                ></el-table-column>
              </el-table>
            </template>
          </el-tab-pane>
          <el-tab-pane label="附加项目" name="third">
            <template>
              <el-table :data="lscse" style="width: 100%">
                <el-table-column
                  prop="subjoinitemname"
                  label="项目名称"
                  width="180"
                ></el-table-column>
                <el-table-column
                  prop="subjoinprice"
                  label="项目价格"
                  width="180"
                >
                </el-table-column>
                <el-table-column prop="artisansid" label="维修小组" width="180">
                </el-table-column>
                <el-table-column prop="mnpricetypeid" label="付款类型">
                </el-table-column>
                <el-table-column prop="remark" label="备注" width="180">
                </el-table-column>
              </el-table>
            </template>
          </el-tab-pane>
          <el-tab-pane label="金额估算" name="fourth">
            <template>
              <el-table :data="lscprice" style="width: 100%">
                <el-table-column prop="atime" label="人工费用" width="180">
                </el-table-column>
                <el-table-column prop="yjg" label="原价格" width="180">
                </el-table-column>
                <el-table-column prop="yhjg" label="优惠价格" width="180">
                </el-table-column>
                <el-table-column prop="yjg" label="积分">
                  <template>
                    {{ lscjf }}
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-tab-pane>
        </el-tabs>

        <el-dialog title="检验信息" :visible.sync="dialogTableVisible">
          <el-form
            :inline="true"
            label-position="left"
            :model="jg"
            class="demo-form-inline"
          >
            <el-form-item prop="checktype">
              <el-radio v-model="jg.checktype" label="0">合格完工</el-radio>
              <el-radio v-model="jg.checktype" label="1">不合格完工</el-radio>
              <span>已返工{{ count }}次</span>
            </el-form-item>
            <br />
            <el-form-item label="预计完工" prop="estimatetime">
              <el-input disabled v-model="jg.estimatetime"></el-input>
            </el-form-item>
            <el-form-item label="质检人">
              <el-input disabled v-model="jg.qualityinspector"></el-input>
            </el-form-item>
            <el-form-item label="负责人">
              <el-input v-model="jg.responsibleperson"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="jg.zherentype" placeholder="请选择">
                <el-option label="正常维修" value="正常维修"> </el-option>
                <el-option label="维修失误" value="维修失误"> </el-option>
              </el-select>
            </el-form-item>
            <template v-if="jg.checktype == 1">
              <el-form-item label="罚款金额">
                <el-input v-model="jg.punishprice"></el-input>
              </el-form-item>
              <br />
              <el-form-item label="返工原因">
                <el-input
                  type="textarea"
                  v-model="jg.returnworkcause"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </template>
            <br />
            <el-button type="success" plain @click="pc()">确认保存</el-button>
          </el-form>
        </el-dialog>
      </template>
    </div>
  </div>
</template>


</div>
</div>
</template>

<script>
export default {
  data() {
    //这里存放数据
    return {
      list: {},
      rid: "",
      rdy: true,
      index: "",
      activeName: "",
      lscql: [],
      lscse: [],
      lscprice: [],
      dialogTableVisible: false,
      jg: {
        repairbillsno: "",
        checktype: "",
        estimatetime: "",
        returnworkcause: "",
        qualityinspector: "",
        responsibleperson: "",
        punishprice: 0,
        zherentype: "",
      },
      lscse:[],
      lscprice:[],
      lscjf:"",
      count: 0,
    };
  },
  //计算属性
  computed: {},
  //方法集合
  methods: {
    handleClick(tab, event) {
      //console.log(tab, event);
      if (tab.index == 0) {
        // this.xmxq()
      } else if (tab.index == 1) {
      } else {
      }
    },
    goBack() {
      history.back();
    },
    wzdy() {
      print({
        printable: "dynr",
        type: "html",
        scanStyles: true,
        headerStyle: "font-size:25px;font-weight: 300;",
        header: "订单详情",
        documentTitle: "株洲九郎山4s店",
        targetStyle: ["*"],
        ignoreElements: ["no-print", "bc", "gb"],
        css: "element-ui/lib/theme-chalk/index.css",
      });
    },
    xmxq() {
      let th = this;
      this.$http
        .get("http://localhost:8080/c/lscrpj/lscql", {
          params: {
            rid: th.rid,
          },
        })
        .then((resp) => {
          th.lscql = resp.data;
          // console.log(th.lscql)
        });
    },
    fjxm(){
         let th =this
        this.$http.get("http://localhost:8080/c/lscsvia/qrid",{
        params:{
            rid:th.rid
        }
        }).then(resp=>{
            th.lscse=resp.data
           // console.log(th.lscse)
        })
    },
    jgjs() {
      let th =this
        this.$http.get("http://localhost:8080/c/jsjg/jg",{
        params:{
            rid:th.rid
        }
        }).then(resp=>{
            th.lscprice=resp.data
            th.lscjf=th.lscprice[0].yjg*0.1
            if(th.lscprice[0].yhjg==0){
                th.lscprice[0].yhjg=parseFloat(th.lscprice[0].yjg)+th.lscprice[0].subjoinprice*1
            }else{
            th.lscprice[0].yhjg=parseFloat(th.lscprice[0].yhjg)+th.lscprice[0].subjoinprice*1
            }
            th.lscprice[0].yjg =  parseFloat(th.lscprice[0].yjg)+th.lscprice[0].subjoinprice*1
           // console.log(th.lscprice)
        })
    },
    ljjs() {
      this.reWorkCount(this.list.repairbillno);
      this.dialogTableVisible = true;
      this.jg.repairbillsno = this.list.repairbillno;
      this.jg.estimatetime = this.list.repairbilldate;
      this.jg.qualityinspector = this.$store.getters.getUser.ename;
    },
    pc() {
      console.info(this.jg);
      let th = this;
      this.$http
        .post("http://localhost:8080/api/end", this.jg)
        .then((res) => {
          if (res.data.code == 200) {
            th.$message({
              message: "保存成功",
              type: "success",
            });
            this.dialogTableVisible = false;

            history.back();
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    qrwg() {
      let th = this;
      this.$confirm("确认完工?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .get("http://localhost:8080/api/rep/modifyZt", {
              params: {
                billNo: this.$route.params.id,
                zt: 3,
              },
            })
            .then((res) => {
              if (res.data.code == 200) {
                th.$message({
                  message: "操作成功",
                  type: "success",
                });
                th.activeName = "";
                history.back();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    reWorkCount(billNo) {
      let th = this;
      this.$http
        .get("http://127.0.0.1:8080/api/end/countRework", {
          params: {
            billNo,
          },
        })
        .then((res) => {
          th.count = res.data;
        });
    },
  },
  //挂载完成（可以访问DOM元素）
  mounted() {
    let th = this;
    this.rid = this.$route.params.id;
    this.$http
      .get("http://localhost:8080/c/rucf/qrxq", {
        params: {
          rid: th.rid,
        },
      })
      .then((resp) => {
        th.list = resp.data;
        // console.log(th.list)
      });
    this.xmxq();
    this.fjxm();
    this.jgjs();
  },
  //监控data中的数据变化
  watch: {},
};
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
</style>